<template>
  <div class="content" :style="contentStyle">
    <v-touch
      class="article"
      v-for="(articleItem,index) in item.articles"
      :key="index"
      :style="articleStyle(articleItem)"
      @tap="item.isFinish?null:puzzleIsShow()"
      :class="{enlarge:item.isPoint}"
    ></v-touch>
    <Puzzle v-if="puzzleShow" :item="item" :index="index" :questionIndex="questionIndex"
            :isBreakLos="isBreakLos" @breakLosTouch="breakLosTouch"/>
  </div>
</template>

<script>
import { mixins } from "@/common/mixins/assignmentMixins.js"
import Puzzle from "./puzzle.vue"
export default {
  mixins: [mixins],
  components: {
    Puzzle
  },
  data() {
    return {
      puzzleShow: false,
      scale: 1
    }
  },
  mounted() {
    if (this.index === 0) this.animate()
  },
  computed: {
    //元素属性
    articleStyle(item) {
      return function (item) {
        const imageUrl = this.item.isFinish ? item.activeImageUrl : item.inActiveImageUrl
        return {
          position: "absolute",
          transition: "all .5s",
          background: "url(" +item.imageUrl + ")0 0/100% 100%",
          width: item.width,
          height: item.height,
          left: item.left,
          top: item.top,
          transform: "scale(" + this.scale + ")"
        }
      }
    }
  },
  methods: {
    puzzleIsShow: function () {
      this.touchMusic()
      this.updateOperated({questionIndex:this.questionIndex,param:this.index})
      this.puzzleShow = !this.puzzleShow
      this.isBreakLos = true
    },
    animate: function () {
      this.$set(this.item, "isPoint", true)
      setTimeout(() => { this.$set(this.item, "isPoint", false) }, 4500)
    }
  },
  watch: {
    activeIndex: function (activeIndex) {
      if (this.index === activeIndex && !this.item.isFinish) {
        this.animate()
      }
    }
  }
}
</script>

<style scoped lang='stylus'>
@import '../../../common/stylus/content.styl'
</style>
